<template>
  <div class="container" ref="container">

    <wxc-popup popup-color="#fff"
               ref="popup"
               :show="popupShow"
               :width="width"
               @wxcPopupOverlayClicked="popupOverClick"
               pos="right">
      <div class="navbar">
        <text class="title">选择{{getTitle()}}</text>
        <text class="icon navbar-left" v-if="currentLevel > startLevel" @click="goBack()">&#xe600;</text>
      </div>
      <wxc-indexlist :normal-list="provinceDataList"
                     v-if="currentLevel == 0"
                     v-bind:key="province"
                     @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                     :show-index="showIndex"></wxc-indexlist>
      <wxc-indexlist :normal-list="cityDataList"
                     v-if="currentLevel == 1"
                     v-bind:key="city"
                     @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                     :show-index="showIndex"></wxc-indexlist>
      <wxc-indexlist :normal-list="districtDataList"
                     v-if="currentLevel == 2"
                     v-bind:key="district"
                     @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                     :show-index="showIndex"></wxc-indexlist>
    </wxc-popup>
    <wxc-loading :show="isLoadingShow" ></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/icon";
  .title {
    font-size: 36px;
    color: $color;

    line-height: 90px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 0;
  }
  .navbar {
    position: relative;
    padding-top: 40px;
    height: 130px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    &-left {
      font-size: 36px;
      color: $color;
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
    }
  }
</style>
<script>

import {WxcIndexlist, WxcPopup, WxcLoading} from 'weex-ui'
let api = require('../include/api')
// let modal = weex.requireModule('modal')
require('../include/page-xdom')
const dom = weex.requireModule('dom')
module.exports = {
  components: {
    WxcIndexlist, WxcPopup, WxcLoading
  },
  props: {
    level: {default: 0, type: Number},
    width: {default: 500}
  },
  data () {
    return {
      showIndex: true,
      indexDataList: [],
      cityDataList: [],
      districtDataList: [],
      provinceDataList: [],
      popupShow: false,
      isLoadingShow: false,
      currentLevel: 0,
      startLevel: 1,
      selectData: {

      }
    }
  },
  created () {
    if (this.level === 0) {
      this.startLevel = 0
    }
    this.currentLevel = this.startLevel
  },
  methods: {
    show () {
      this.loadData().done(rs => {
        this.popupShow = true
      })
    },
    loadData () {
      this.isLoadingShow = true
      return api.region.level({level: this.startLevel}).done(rs => {
        let data = rs.data
        this.handleRsData(data)
      }).always(rs => {
        this.isLoadingShow = false
      })
    },
    handleRsData (data) {
      // modal.alert({message: JSON.stringify(data)})
      let tmp = data[0]
      this.currentLevel = tmp.level
      var listName
      switch (tmp.level) {
        case 0: listName = 'provinceDataList'; break
        case 1: listName = 'cityDataList'; break
        case 2: listName = 'districtDataList'; break
      }
      this[listName] = []
      data.forEach(c => {
        this[listName].push({
          name: c.name,
          pinYin: c.pinyin,
          py: c.shortPinyin,
          id: c.id,
          level: c.level
        })
      })
      dom.scrollToElement(this.$refs['container'], {
        offset: 0
      })
    },
    popupOverClick () {
      this.popupShow = false
    },
    loadChildren (parentId) {
      this.isLoadingShow = true
      return api.region.list({parentId: parentId}).done(rs => {
        this.handleRsData(rs.data)
      }).always(rs => {
        this.isLoadingShow = false
      })
    },
    wxcIndexlistItemClicked (e) {
      let region = e.item
      if (region.level === 0) {
        this.selectData.province = region
      }
      if (region.level === 1) {
        this.selectData.city = region
      }
      if (region.level === 2) {
        this.selectData.district = region
      }
      if (parseInt(region.level) === parseInt(this.level)) {
        this.$emit('select', this.selectData)
        this.$refs.popup.hide()
        return
      }
      this.loadChildren(region.id)
    },
    getTitle () {
      switch (this.currentLevel) {
        case 0: return '省份'
        case 1: return '城市'
        case 2: return '县/区'
      }
    },
    goBack () {
      this.currentLevel = this.currentLevel - 1
    }
  }
}
</script>
